<template>
  <div class="changeArea">
    <NavBar fixed placeholder title="作业区域" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <div class="map" id="map"></div>
    <div class="btns">
      <Button class="btn" size="small" @click="$router.back()">取消</Button>
      <Button class="btn" type="info" color="#E16712" @click="confirm"
        >确认</Button
      >
    </div>
  </div>
</template>

<script>
import {
  Popup,
  Picker,
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  DatetimePicker,
  Toast,
} from "vant";

import BaiduMap from "BaiduMap";
export default {
  props: {},
  data() {
    return {
      address: "",
      lng: null,
      lat: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    let query = JSON.parse(this.$route.query.info);
    console.log(query);
    // console.log(this.$route.query.codeA);
    this.city();
  },
  watch: {},
  methods: {
    city() {
      this.$geolocation.getCurrentPosition(
        (position) => {
          console.log(position);
          const { lat, lng } = position.point;
          const { province, city, district, street, street_number } =
            position.address;
          this.address = province + city + district + street + street_number;
          this.lat = lat;
          this.lng = lng;
          //   获取位置后 再渲染
          this.getMap(position);
        },
        (e) => {
          console.log(e);
          this.$toast("定位失败！");
        },
        { provider: "baidu" }
      );
    },
    getMap(position) {
      // 渲染地图
      const that = this;
      console.log(BaiduMap, BaiduMap);
      const map = new BaiduMap.Map("map");
      console.log(map);
      const point = new BaiduMap.Point(this.lng, this.lat); //经纬度 lng, lat
      console.log(point);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      console.log(BaiduMap);
      createMaker(position);
      map.addEventListener("click", function (e) {
        //鼠标单击地图触发
        console.log(e);

        this.lng = e.point.lng;
        this.lat = e.point.lat;
        map.clearOverlays();

        var geocoder = new BaiduMap.Geocoder();
        geocoder.getLocation(e.point, function (rs) {
          console.log(rs.address); //地址描述(string)
          that.address = rs.address;
          createMaker(e);
          //   console.log(rs.addressComponents); //结构化的地址描述(object)
          //   console.log(rs.addressComponents.province); //省
          //   console.log(rs.addressComponents.city); //城市
          //   console.log(rs.addressComponents.district); //区县
          //   console.log(rs.addressComponents.street); //街道
          //   console.log(rs.addressComponents.streetNumber); //门牌号

          //   console.log(rs.surroundingPois); //附近的POI点(array)

          //   console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
        });
      });

      function createMaker(e) {
        let marker = new BaiduMap.Marker(e.point);
        map.addOverlay(marker);
        map.panTo(e.point);
        /* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 */
        //创建右键菜单
        var markerMenu = new BaiduMap.ContextMenu();
        markerMenu.addItem;
        //   new BaiduMap.MenuItem("删除", removeMarker.bind(marker))();
        marker.addContextMenu(markerMenu);
        /* markerMenu.addItem(new BMap.MenuItem('提交', commitMapMsg
                .bind(marker)));

        marker.addContextMenu(markerMenu); */

        //标注
        var text = `<p class='a'>${that.address}</p>`;

        var label = new BaiduMap.Label(text, {
          offset: new BaiduMap.Size(-85, -120),
        });
        //设置label(标注的样式)
        label.setStyle({
          color: "black",
          fontSize: "20px",
          // width: "100px",
          padding: "15px",
          // height: "50px",
          //lineHeight : "20px",
          fontFamily: "微软雅黑",
          maxWidth: "none",
          border: "none",
        });
        marker.setLabel(label);
      }
    },

    confirm() {
      let query = JSON.parse(this.$route.query.info);

      // return console.log(this.$route.query);
      query.workPosition = this.address;
      query.workCoord = this.lng + "," + this.lat;
      query = {
        info: JSON.stringify(query),
      };
      // return console.log(query);
      this.$router.push({
        path: "JobDetails",
        query,
      });
    },
  },
  components: {
    Popup,
    Picker,
    NavBar,
    Icon,
    Field,
    Cell,
    Uploader,
    Button,
    DatetimePicker,
    Toast,
  },
};
</script>

<style scoped lang="less">
.changeArea {
  overflow: hidden;
  .map {
    width: 100%;
    height: calc(100% - 92px);
    // background-color: red;
    overflow: hidden;
  }
  .BMapLabel,
  .a {
    width: 100px;
    color: red;
  }
  .btns {
    position: absolute;
    bottom: 50px;
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    .btn {
      width: 180px;
      height: 85px;
      border-radius: 5px;
      // margin-left: 50px;
      margin: 0 30px;
    }
  }
}
</style>
